<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted,onBeforeUnmount } from "vue";
// import type { TagProps } from 'element-plus'

//echars图表
var  myChart:any = null;
onMounted(() => {
  //人员流动
  var  people_flow:any = document.getElementById("people_flow")
  myChart = echarts.init(people_flow);
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      //图例
      icon: "rect",
      itemHeight: 5,
      itemWidth: 12,
      // padding: 1,
      align: "left",
      itemStyle: {
        color: "rgb(136, 104, 233)", //图例颜色
        align: "right",
      },
      textStyle: {
        color: "#fff",
        right: "10",
      },
      // data: ['2021年'],
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    // itemStyle: { normal: { label: { show: true } } },
    series: [
      {
        // name: '2021年',
        smooth: true,
        seriesLayoutBy: "row",
        color: "rgb(103, 151, 248)",
        type: "line",
        stack: "Total",
        lineStyle: {
          //边线
          // width: 0,
          color: "rgb(136, 104, 233)",
        },
        // showSymbol: false,//圆点点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(56, 64, 123)",
            },
            {
              offset: 1,
              color: "rgb(41, 157, 168)",
            },
          ]),
        },
        // emphasis: {
        //     focus: 'series'
        // },
        data: [200, 250, 345, 460, 360, 485, 420, 510, 405, 450, 350, 440],
      },
    ],
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#rgba(255,255,255,0.1)",
        interval: "0", //相隔0个刻度显示
      },
      axisTick: {
        show: false, //隐藏x轴刻度
      },
      boundaryGap: true,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      gridIndex: 0,
      axisLabel: {
        color: "#ffffff",
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "rgba(255,255,255,0.1)", //坐标轴线颜色
          width: "1",
        },
      },
    },
  });
  // 租金收入
  var rent:any = document.getElementById("rent")
  myChart = echarts.init(rent);
  // 创建图表对象
  var option = {
    title: {
      text: "本月收入：￥2634783.9",
      x: "right",
      y: "5px",
      textStyle: {
        fontFamily: "Arial",
        color: "#ffffff",
        fontSize: 12,
        fontStyle: "normal",
        fontWeight: "bold",
      },
    },
    textStyle: {
      fontSize: "12px",
      color: "white",
    },
    xAxis: {
      type: "category",
      data: ["11/20", "11/22", "11/24", "11/26", "11/28"],
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: "rgb(171, 172, 174)",
          width: 0.5,
        },
      },
      axisLabel: {
        show: true,
        color: "#6699ff",
        fontSize: 10,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：元",
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: "rgb(171, 172, 174)",
          width: 0.5,
        },
      },
      axisLabel: {
        show: true,
        color: "#6699ff",
        fontSize: 10,
      },
    },
    grid: {
      top: "35px",
      left: "5px",
      right: "5px",
      bottom: "1px",
      containLabel: true,
      borderWidth: 1,
      borderColor: "gray",
    },
    series: [
      {
        data: [198, 630, 851, 160, 360],
        type: "line",
        smooth: true,
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);

  //收益汇总
  var ysl_main:any = document.getElementById("ysl_main")
  myChart = echarts.init(ysl_main);
  var option1 = {
    title: {
      // text: '当月收益汇总 ',
      // top: 5,
      // left: 20,
      // textStyle: {
      //   fontSize: 16,
      //   color: '#fff',
      //   // padding: [0, 0, 0, -8]
      // }
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      left: 62,
      top: 12,
      data: ["物业费", "广告", "出租", "停车费"],
      textStyle: {
        fontSize: 12,
        color: "#fff",
        // padding: [0, 0, 0, -8]
      },
    },
    grid: {
      top: "20%",
      left: "5px",
      right: "5%",
      bottom: "10%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        // saveAsImage: {}
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1日", "5日", "10日", "15日", "20日", "25日", "31日"],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位/万元",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
          // margin: 15,
        },
      },
    },
    series: [
      {
        name: "物业费",
        type: "line",
        stack: "Total",
        data: [20, 32, 19, 34, 90, 60, 10],
      },
      {
        name: "广告",
        type: "line",
        stack: "Total",
        data: [120, 122, 11, 104, 90, 70, 80],
      },
      {
        name: "出租",
        type: "line",
        stack: "Total",
        data: [50, 32, 10, 54, 90, 37, 70],
      },
      {
        name: "停车费",
        type: "line",
        stack: "Total",
        data: [20, 32, 50, 34, 90, 60, 70],
      },
    ],
  };
  myChart.setOption(option1);

  //企业种类占比
  var cxmain:any = document.getElementById("cxmain")
  myChart = echarts.init(cxmain);
  var option2 = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      // top: '5%',
      // left: 'left',
      orient: "vertical",
      // x:'left',
      y: "middle",
      data: [
        "个人独资企业",
        "私营企业",
        "国有企业",
        "联营企业",
        "有限合伙企业",
      ],
      right: 5,
      radius: ["50%", "50%"],
      icon: "circle",
      textStyle: {
        color: "white",
      },
      formatter: function (name) {
        let data:any = option.series[0].data;
        // console.log(data, 'data')
        let total = 0;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          total += data[i].value;
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        let v = tarValue;
        //计算出百分比
        let p = Math.round((tarValue / total) * 100) + "%";
        return `${name} ${p}`;
        //name是名称，v是数值
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        center: ["26%", "50%"],
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 9, name: "个人独资企业" },
          { value: 10, name: "私营企业" },
          { value: 12, name: "国有企业" },
          { value: 15, name: "联营企业" },
          { value: 20, name: "有限合伙企业" },
        ],
      },
    ],
  };
  myChart.setOption(option2);
});

onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 

</script>
<template>
  <div class="visualization_second">
    <div class="visualization_second_box">
      <!--租赁  人员流动  租金收入-->
      <div class="lea_peo_rent">
        <!-- 实际租赁情况头部 -->
        <div class="top">
          <img src="@/assets/zulin.svg" alt="" />
          <span>实际租赁情况</span>
        </div>
        <!-- 实际租赁情况 -->
        <div class="lease">
          <div class="lease_child">
            <div class="lease_child_num">3490</div>
            <div class="lease_child_text">可租赁资产</div>
            <img src="@/assets/zulin1.svg" alt="" />
          </div>
          <div class="lease_child">
            <div class="lease_child_num">87</div>
            <div class="lease_child_text">待租资产</div>
            <img src="@/assets/zulin2.svg" alt="" />
          </div>
          <div class="lease_child">
            <div class="lease_child_num">2464</div>
            <div class="lease_child_text">已租资产</div>
            <img src="@/assets/zulin3.svg" alt="" />
          </div>
          <div class="lease_child">
            <div class="lease_child_num">26</div>
            <div class="lease_child_text">到期资产</div>
            <img src="@/assets/zulin4.svg" alt="" />
          </div>
        </div>

        <!-- 人员流动监控头部 -->
        <div class="top">
          <img src="@/assets/peopleflow.svg" alt="" />
          <span>人员流量监控</span>
        </div>
        <!-- 人员流动监控 -->
        <div id="people_flow"></div>

        <!-- 租金收入情况头部 -->
        <div class="top">
          <img src="@/assets/zujin.svg" alt="" />
          <span>租金收入情况</span>
        </div>
        <!-- 租金收入情况 -->
        <div id="rent"></div>
        <!-- 租金增长比 -->
        <div class="rent_add">
          <div class="add_left">
            <span
              >同比增长：<el-icon color="rgb(7, 234, 7)"> <Top /> </el-icon
            ></span>
            <span>9%</span>
          </div>
          <div class="add_right">
            <span
              >环比增长：<el-icon color="rgb(7, 234, 7)"> <Top /> </el-icon
            ></span>
            <span>13%</span>
          </div>
        </div>
      </div>

      <div class="bottom">
        <!-- ysl当月收益汇总 -->
        <div class="bottom_zulin">
          <div class="top">
            <img src="@/assets/zulin.svg" alt="" />
            <span>当月收益汇总</span>
          </div>
          <el-row id="ysl_main"></el-row>
        </div>

        <!-- cx企业种类占比 -->
        <div class="firm">
          <div class="top">
            <img src="@/assets/zulin.svg" alt="" />
            <span>企业种类占比</span>
          </div>
          <div id="cxmain"></div>
        </div>

        <!-- 租赁到期提醒 -->
        <div class="new_leases">
          <div class="top1">
            <img src="@/assets/zulintixing.svg" alt="" />
            <div>新增租赁提醒</div>
          </div>
          <div class="btm">
            <div class="count">
              <div class="one">签<br />约</div>
              <div class="two">
                <div>浙江久拓科技有限公司</div>
                <div>A2幢3层504层 2022</div>
              </div>
              <div class="three">
                <div>股份企业家</div>
                <div>猪猪猪</div>
              </div>
            </div>
            <div class="count">
              <div class="one">签<br />约</div>
              <div class="two">
                <div>浙江久拓科技有限公司</div>
                <div>A2幢3层504层 2022</div>
              </div>
              <div class="three">
                <div>股份企业家</div>
                <div>猪猪猪</div>
              </div>
            </div>
            <div class="count">
              <div class="one">签<br />约</div>
              <div class="two">
                <div>浙江久拓科技有限公司</div>
                <div>A2幢3层504层 2022</div>
              </div>
              <div class="three">
                <div>股份企业家</div>
                <div>猪猪猪</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 新增租赁提醒 -->
        <div class="lease_expires">
          <div class="top2">
            <img src="@/assets/zulintixing.svg" alt="" />
            <div>租赁到期提醒</div>
          </div>
          <div class="btm1">
            <div class="count1">
              <div class="one1" style="background-color: #a30014">
                逾<br />期
              </div>
              <div class="two1">
                <div>浙江久拓科技有限公司</div>
                <div>A2幢3层504层 2022</div>
              </div>
              <div class="three1">
                <div>股份企业家</div>
                <div>猪猪猪</div>
              </div>
            </div>
            <div class="count1">
              <div class="one2" style="background-color: #f59a23">
                提<br />醒
              </div>
              <div class="two1">
                <div>浙江久拓科技有限公司</div>
                <div>A2幢3层504层 2022</div>
              </div>
              <div class="three1">
                <div>股份企业家</div>
                <div>猪猪猪</div>
              </div>
            </div>
            <div class="count1">
              <div class="one3" style="background-color: #f59a23">
                提<br />醒
              </div>
              <div class="two1">
                <div>浙江久拓科技有限公司</div>
                <div>A2幢3层504层 2022</div>
              </div>
              <div class="three1">
                <div>股份企业家</div>
                <div>猪猪猪</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 天气 -->
      <!-- <div class="weather-box">
      </div> -->
    </div>
  </div>
</template>
<style scoped>
/* 租赁-人员-租金 */
.visualization_second {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  box-sizing: border-box;
  padding: 15px 0 0px 12px;
}

.visualization_second .visualization_second_box {
  width: 100%;
  height: 100%;
  background: url("@/assets/数据可视_招商分析.png") no-repeat center/100% 100%;
  box-sizing: border-box;
  padding: 10px 0 0px 10px;
}

.visualization_second .bottom {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: flex-start;
}

.visualization_second .lea_peo_rent {
  width: 350px;
  height: 70%;
  background-color: rgba(0, 19, 77, 0.498);
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid rgba(2, 125, 180, 1);
  border-radius: 10px;
}

.visualization_second .lea_peo_rent .top img {
  vertical-align: middle;
}

.visualization_second .lea_peo_rent .top span {
  display: inline-block;
  color: white;
  margin-left: 15px;
  font-size: 12px;
}

.visualization_second .lea_peo_rent .lease,
.visualization_second .lea_peo_rent #people_flow,
.visualization_second .lea_peo_rent #rent {
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
}

.visualization_second .lea_peo_rent .lease {
  background-color: rgba(44, 35, 95, 0.4);
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  text-align: center;
  box-sizing: border-box;
  padding: 0 20px;
}

.visualization_second .lea_peo_rent .lease .lease_child .lease_child_num {
  font-size: 22px;
}

.visualization_second .lea_peo_rent .lease .lease_child .lease_child_text {
  font-size: 12px;
  margin: 20px 0;
}

.visualization_second .lea_peo_rent #rent {
  margin-bottom: none;
}

.visualization_second .lea_peo_rent .rent_add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 12px;
}

.visualization_second .lea_peo_rent .rent_add .add_left {
  margin-left: 16px;
}

.visualization_second .lea_peo_rent .rent_add .add_right {
  margin-right: 5px;
}

/* 收益汇总 css  */
.visualization_second .bottom .bottom_zulin {
  width: 350px;
  height: 250px;
  background-color: rgba(0, 19, 77, 0.498);
  border: 1px solid rgba(2, 125, 180, 1);
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 5px;
  margin-top: 10px;
}

.visualization_second .bottom .bottom_zulin .top,
.visualization_second .bottom .firm .top {
  margin-left: 12px;
}

.visualization_second .bottom .bottom_zulin .top img,
.visualization_second .bottom .firm .top img {
  vertical-align: middle;
}

.visualization_second .bottom .bottom_zulin .top span,
.visualization_second .bottom .firm .top span {
  display: inline-block;
  color: white;
  margin-left: 15px;
  font-size: 12px;
}

#ysl_main {
  /* position: relative; */
  height: calc(100% - 21px);
  width: 100%;
}

/*cx 企业种类占比css*/
.visualization_second .bottom .firm {
  width: 350px;
  /* width: 350px; */
  height: 250px;
  background-color: rgba(0, 19, 77, 0.498);
  border: 1px solid rgba(2, 125, 180, 1);
  border-radius: 10px;
  padding: 10px;
  margin: 10px 10px 0 10px;
}

.visualization_second .bottom .firm #cxmain {
  height: calc(100% - 10px);
  width: 100%;
}

/* 新增租賃  租賃到期 */
.new_leases,
.lease_expires {
  display: flex;
  flex-direction: column;
  margin: 10px 10px 0 0;
  height: 250px;
  width: 20%;
  border: 1px solid #066da0;
  border-radius: 10px;
  background-color: rgba(0, 19, 77, 0.498);
  box-sizing: border-box;
  padding: 10px;
}

.new_leases .top1,
.lease_expires .top2 {
  display: flex;
}

.new_leases .top1 > img,
.lease_expires .top2 > img {
  vertical-align: middle;
}

.new_leases .top1 > div,
.lease_expires .top2 > div {
  display: inline-block;
  color: white;
  margin-left: 15px;
  font-size: 12px;
}

.new_leases .btm .count,
.lease_expires .btm1 .count1 {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 8px;
  margin: 20px 5px 20px 5px;
  background-color: rgba(44, 35, 95, 0.6);
  color: white;
}

.lease_expires .btm1 .count1 .one1,
.lease_expires .btm1 .count1 .one2,
.lease_expires .btm1 .count1 .one3 {
  height: 100%;
  width: 26px;
  text-align: center;
  color: white;
  padding: 5px 0;
  margin-right: 5px;
}

.new_leases .btm .count .one {
  height: 100%;
  width: 26px;
  text-align: center;
  background-color: #015478;
  color: white;
  margin-right: 5px;
  padding: 5px 0;
}

.new_leases .btm .count .three,
.lease_expires .btm1 .count1 .three1 {
  position: absolute;
  right: 0;
}
</style>
